<template>
	<view class="">
		<view class="static-container bg-box">
			<view class="col" @click="userLists(1)">
				<view class="number">
					<view class="volum text-highlight">{{ analysisData.level1 }}</view>
					<view class="unit text-highlight">人</view>
				</view>
				<view class="title text-dark">一代</view>
			</view>
			<view class="col" @click="userLists(2)">
				<view class="number">
					<view class="volum text-highlight">{{ analysisData.level2 }}</view>
					<view class="unit text-highlight">人</view>
				</view>
				<view class="title text-dark">二代</view>
			</view>
			<view class="col" @click="userLists(3)">
				<view class="number">
					<view class="volum text-highlight">{{ analysisData.level3 }}</view>
					<view class="unit text-highlight">人</view>
				</view>
				<view class="title text-dark">三代</view>
			</view>
		</view>
		<view class="more text-dark">点击上面数字可查看具体人员</view>
	</view>
</template>

<script>
	import api from '@/utils/api/invite/index.js';
	export default {
		data() {
			return {
				analysisData: {
					level1: 0,
					level2: 0,
					level3: 0
				}
			};
		},
		onLoad() {
			this.analysis()
		},
		methods: {
			userLists(type) {
				let uids = [];
				if (type == 1) {
					uids = this.analysisData.level1Uids;
				} else if (type == 2) {
					uids = this.analysisData.level2Uids;
				} else {
					uids = this.analysisData.level3Uids;
				}

				uni.navigateTo({
					url: "user-lists?type=" + type + "&uids=" + JSON.stringify(uids)
				})
			},
			async analysis() {
				let res = await api.analysis()
				if (res.status == 1) {
					this.analysisData = res.data;
				}
			}
		}
	};
</script>

<style lang="scss">
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	page {
		height: 100%;
		background-color: #22192E;
		background-image: url(../../static/background/wallet_bg_night.png);
	}

	.self-static {
		border-bottom: .5px solid #22192E;
		padding: 15px;
		text-align: center;

		.self-title {
			font-weight: bold;
			font-size: 16px;
		}
	}

	.static-container {
		flex-flow: row wrap;
		justify-content: space-between;
		margin: 0 15px;
		border-radius: 12px;
		margin-top: 15px;

		.col {
			width: 33.33%;
			border: .5px solid #22192E;
			padding: 10px 0;

			.number {
				flex-direction: row;
				text-align: center;
				justify-content: center;

				.volum {
					font-size: 25px;
					font-weight: bold;
					line-height: 30px;
				}

				.unit {
					font-weight: bold;
					font-size: 12px;
					justify-content: flex-end;
				}

			}

			.title {
				text-align: center;
				color: #999;

			}
		}
	}

	.more {
		padding: 20px;
		text-align: center;
	}
</style>
